<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>新增菜单</title>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <!-- 引入 dtree 相关资源 -->
    <link rel="stylesheet" th:href="@{/js/lay-module/dtree/dtree.css}">
    <link rel="stylesheet" th:href="@{/js/lay-module/dtree/font/dtreefont.css}">

    <style>
        .layui-form-item .layui-input-company {
            width: auto;
            padding-right: 10px;
            line-height: 38px;
        }

        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <form class="layui-form" action="" lay-filter="formDemo">
        <div class="layui-form layuimini-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="0" title="模块" lay-filter="type" checked>
                    <input type="radio" name="type" value="1" title='目录' lay-filter="type">
                    <input type="radio" name="type" value="2" title="功能" lay-filter="type">
                    <input type="radio" name="type" value="3" title="按钮/权限" lay-filter="type">
                </div>
            </div>

            <div class="layui-form-item" id="uppermenu_div">
                <label class="layui-form-label required">上级目录</label>
                <div class="layui-input-block">
                    <!-- 如果需要指定初始值，添加：data-value="" -->
                    <ul id="menuTree" class="dtree" data-id="0"></ul>
                </div>
            </div>

            <div class="layui-form-item" id="name_div">
                <label class="layui-form-label required">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" lay-verify="required" lay-reqtext="请输入名称" placeholder="请输入" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" id="sign_div">
                <label class="layui-form-label required">权限标识</label>
                <div class="layui-input-block">
                    <input type="text" name="sign" id="sign" lay-verify="required" lay-reqtext="请输入权限标识" placeholder="请输入" class="layui-input">
                    <tip>权限标识作为唯一标识，请输入全英文</tip>
                </div>
            </div>

            <div class="layui-form-item" id="href_div">
                <label class="layui-form-label required">路径</label>
                <div class="layui-input-block">
                    <input type="text" name="href" id="href" placeholder="请输入" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" id="target_div">
                <label class="layui-form-label required">打开方式</label>
                <div class="layui-input-block">
                    <select name="target" id="target" lay-verify="required" lay-reqtext="请选择打开方式">
                        <option value="_self" selected>内链</option>
                        <option value="_blank">外链</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item" id="icon_div">
                <label class="layui-form-label">图标</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请选择" class="layui-input" id="iconPicker" lay-filter="iconPicker">
                    <input type="text" name="icon" id="icon" placeholder="请输入" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" id="sort_div">
                <label class="layui-form-label required">排序</label>
                <div class="layui-input-block">
                    <input type="number" min="0" name="sort" id="sort" lay-verify="required" lay-reqtext="请输入排序" placeholder="请输入" class="layui-input" value="0">
                    <tip>值越小，越靠前</tip>
                </div>
            </div>

            <div class="layui-form-item" id="descript_div">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <textarea name="descript" id="descript" placeholder="请输入" class="layui-textarea" style="resize: none"></textarea>
                </div>
            </div>

            <!-- 右侧悬浮按钮 -->
            <div class="right-bottom-btn">
                <button class="layui-btn" lay-submit lay-filter="saveBtn"><i
                        class="layui-icon layui-icon-ok"></i>确认
                </button>
                <button class="layui-btn" lay-filter="cancleBtn"><i
                        class="layui-icon layui-icon-close"></i>取消
                </button>
            </div>
        </div>

    </form>

<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/lib/coco-message/coco-message.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js}" charset="utf-8"></script>

<script type="text/javascript" th:inline="javascript">
    AjaxUtil.ctx = /*[[@{/}]]*/'';
    layui.use(['form', 'iconPickerFa', 'dtree'], function () {
        var form = layui.form,
            layer = layui.layer,
            dtree = layui.dtree,
            iconPickerFa = layui.iconPickerFa;

        // 一进来默认选择的是模块
        $('#uppermenu_div').hide(); // 隐藏上级菜单
        $('#href_div').hide(); // 隐藏路径
        $('#target_div').hide(); // 隐藏打开方式

        // 监听radio的切换
        form.on('radio(type)', function(data) {
            var value = data.value;

            if(0 == value){ // 模块
                $('#uppermenu_div').hide(); // 隐藏上级菜单
                $('#href_div').hide(); // 隐藏路径
                $('#target_div').hide(); // 隐藏打开方式

                $('#name_div').show(); // 显示名称
                $('#sign_div').show(); // 显示标识
                $('#icon_div').show(); // 显示图标
                $('#sort_div').show(); // 显示排序
                $('#descript_div').show(); // 显示描述

            } else if (1 == value) { // 目录

                $('#uppermenu_div').show();
                $('#href_div').hide();
                $('#target_div').hide();

                $('#name_div').show();
                $('#sign_div').show();
                $('#icon_div').show();
                $('#sort_div').show();
                $('#descript_div').show();

            } else if (2 == value) { // 功能

                $('#uppermenu_div').show();
                $('#href_div').show();
                $('#target_div').show();

                $('#name_div').show();
                $('#sign_div').show();
                $('#icon_div').show();
                $('#sort_div').show();
                $('#descript_div').show();
            } else if (3 == value) { // 按钮权限

                $('#uppermenu_div').show();
                $('#href_div').hide();
                $('#target_div').hide();
                $('#icon_div').hide();

                $('#name_div').show();
                $('#sign_div').show();
                $('#sort_div').show();
                $('#descript_div').show();
            }
        });


        // 渲染树状菜单选择器
        dtree.render({
            elem: "#menuTree",              // 绑定的菜单
            width: "100%",                  // 宽度百分百
            select: true,                   // 指定下拉树模式
            url: AjaxUtil.ctx + "permission/listPermission",   // 请求的URL
            none: "请选择菜单类型",
            method: "GET",                  // 请求方式
            dataStyle: "layuiStyle",        // 使用layui风格的数据格式
            dataFormat: "list",             // 配置data的风格为list
            response: {message: "message", statusCode: 0},  //修改response中返回数据的定义，消息主键为message，成功代码为0
            selectCardHeight: "350",        // 卡片高度
            line: true,                     // 开启连接线
            ficon: ["1", "-1"],             // 修改一级图标样式（展开与否的按钮，最后一级不显示）
            icon: "7",                      // 修改二级图标样式
            highlightCurrent: true,         // 是否高亮当前选中节点，默认值是 false。
            accordion: false,                // 开启手风琴
            initLevel: 1,                    // 默认展开层级，默认为2，
            selectInputName: {              // 给隐藏的表单输入框指定名称
                nodeId: "parentId",         // 上级菜单的input的name
                context: "parentName"
            }
        });


        // 渲染图标模块
        iconPickerFa.render({
            elem: '#iconPicker',
            url: AjaxUtil.ctx + "lib/font-awesome-4.7.0/less/variables.less",
            search: true,
            page: true,
            limit: 20,
            click: function (data) {
                form.val("formDemo", {
                    "icon": data.icon
                });
            }
        });

        // 监听提交
        form.on('submit(saveBtn)', function (res) {
            var data = res.field;
            console.log("data.parentId = " + data.parentId);
            // 模块
            if(0 == data.type) {

            }
            // 目录
            else if(1 == data.type){
                if(!data.parentId){
                    Message.warning("请选择上级菜单!", 500);
                    return false;
                }
            }
            // 功能
            else if(2 == data.type){
                if(!data.parentId){
                    Message.warning("请选择上级菜单!", 500);
                    return false;
                }
                if(!data.href){
                    Message.warning("请输入菜单路径!", 500);
                    return false;
                }
            }
            // 按钮权限
            else if(3 == data.type){
                if(!data.parentId){
                    Message.warning("请选择上级菜单!", 500);
                    return false;
                }
            }

            if (!!data.icon) {
                data.icon = 'fa ' + data.icon;
            } else {
                data.icon = 'fa fa-home'; // 如果不选择，则设置为默认的
            }

            var index = layer.load(0, {shade: 0.1});
            AjaxUtil.post({
                url: AjaxUtil.ctx + "permission/doAdd",
                data: data,
                success: function (res) {
                    layer.close(index);
                    if (0 === res.code) {
                        Message.success(1000, res.message, function () {
                            var windowIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(windowIndex);
                        });
                    } else {
                        Message.warning(res.message, 500);
                    }
                },
                error: function (error) {
                    layer.close(index);
                    Message.error("服务器异常！", 500);
                }
            });
            return false;
        });


        // 监听取消按钮
        $("button[lay-filter='cancleBtn']").click(function(){
            var iframeIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(iframeIndex);
        });

        // 点击任何地方关闭下拉树
        $("body").on("click", function (event) {
            $("div[dtree-id][dtree-select]").removeClass("layui-form-selected");
            $("div[dtree-id][dtree-card]").removeClass("dtree-select-show layui-anim layui-anim-upbit");
        });
    });
</script>
</body>
</html>